<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-13 09:20:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-16 18:46:09
-->
<template>
   <div class="header">
         <div class="header_top">
           <div class="wrapper">
              <div class="logo" v-for="item in carousel" :key="item.id">
                <img :src="item.url" alt="">
              </div>
            <div class="search">
              
                <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
            </div>
         </div>
         <ul class="nav">
           <li v-for="c in categories" 
            @click="toListHandler(c)"
            :key="c.id">{{c.name}}</li>
         </ul>
        
    </div>
</template>



<script>
import { get } from '../../utils/request'
export default {
  data(){
    return {
      input:"",
      categories:[],
      carousel:[]
    }
  },
  methods:{
    // 跳转
    toListHandler(category){
      // 跳转
      this.$router.push({
        path:category.description,
        query:category
      })
    },
    // 加载栏目信息
    loadCategories(){
      let url = '/index/category/findAll'
      get(url).then(resp => {
        let arr=resp.data;
        this.categories = arr.slice(0,5);
      })
    },
    loadCarousel(){
        let url='/index/carousel/findAll';
        get(url)
        .then(res => {
            let arr = res.data;
            this.carousel=arr.slice(13,14);
        })
    },
  },
  created(){
    this.loadCategories();
    this.loadCarousel();
  }
}
</script>


<style  lang="scss" scoped>
.header{
  
  .header_top{
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    margin-bottom: 20px;
    margin-top: 10px;

    &.wrapper{
         display: flex;
         justify-content: space-between;
        position: relative;
    }
    .logo{
      width: 20%;
    }
    .search{
      width: 50%;
      position: absolute;
      top: 35px;
      right: 170px;
    }
    
  }
  ul.nav{
    background-color: red;
    min-height: 60px;
    color: #fff;
    & > li{
      float: left;
      cursor: pointer;
      padding: 1.5em 9em;
    }
  }
}

</style>